<template>
	<layout v-if="userInfo.user_type == 1">
		<simple-toolbar :title="$t('user.userInfo')"></simple-toolbar>
		
		<view class="pad-base table">
			<el-table :data="list" style="width: 100%">
				<el-table-column align="center" prop="account" :label="$t('user.email')"></el-table-column>
				<!-- <el-table-column align="center" prop="user_name" :label="$t('user.user_name')"></el-table-column> -->
				<el-table-column align="center" prop="last_name" :label="$t('user.last_name')"></el-table-column>
				<el-table-column align="center" prop="first_name" :label="$t('user.first_name')"></el-table-column>
				<el-table-column align="center" prop="dob" :label="$t('user.dob')"></el-table-column>
				<el-table-column align="center" prop="phone" :label="$t('user.phone')"></el-table-column>
				<!-- <el-table-column align="center" prop="wallet" :label="$t('user.wallet')"></el-table-column> -->
				<el-table-column align="center" prop="autowithdraw" :label="$t('user.autowithdraw')">
					<template slot-scope="scope">
						{{ scope.row.autowithdraw ? 'YES' : 'NO' }}
					</template>
				</el-table-column>
			</el-table>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</layout>

	<layout v-else>
		<simple-toolbar :title="$t('user.personInfo')">
			<view class="update" v-if="list.account">
				<view class="button" @click="changePwd">
					<image src="../../../static/informationSecurity.png"></image>
					<text>{{ $t('user.changePassword') }}</text>
				</view>
				<view class="button" @click="createInfo">
					<image src="../../../static/pen.png"></image>
					<text>{{ $t('user.changeData') }}</text>
				</view>
			</view>
		</simple-toolbar>

		<view class="text" v-if="!list.account">
			<text>{{ $t('user.notCreate') }}</text>
			<text class="green" @click="createInfo">{{ $t('user.goCreate') }}</text>
		</view>
		<view class="box" v-else>
			<view class="item">
				<view class="subItem">
					<text class="key">{{ $t('user.email') }}：</text>
					<text class="value">{{ userInfo.email }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('user.first_name') }}：</text>
					<text class="value">{{ list.first_name }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('user.dob') }}：</text>
					<text class="value">{{ list.dob }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('user.autowithdraw') }}：</text>
					<text class="value">{{ list.autowithdraw == false ? 'NO' : 'YES' }}</text>
				</view>
				<!-- <view class="subItem">
					<text class="key">{{ $t('user.wallet') }}：</text>
					<text class="value">{{ list.wallet }}</text>
				</view> -->
			</view>
			<view class="item">
				<view class="subItem">
					<text class="key">{{ $t('user.referral_code') }}：</text>
					<text class="value">{{ list.referal_code }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('user.last_name') }}：</text>
					<text class="value">{{ list.last_name }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('user.phone') }}：</text>
					<text class="value">{{ list.phone }}</text>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		getUserList,
		getUserProfile
	} from "../../../js_sdk/uni-admin/user.js"
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			...mapState('user', ['userInfo']),
			// i18n() {
			// 	return this.$t('mes')
			// }
		},
		onShow() {
			this.loadData()
		},
		methods: {
			changePwd() {
				uni.navigateTo({
					url: './change-pwd'
				});
			},
			createInfo() {
				if (!this.list.account) {
					uni.navigateTo({
						url: "./user-profile"
					})
				} else {
					uni.navigateTo({
						url: './user-profile?data=' + encodeURIComponent(JSON.stringify(this.list))
					})
				}
			},
			async loadData() {
				try {
					let res = undefined
					if (this.userInfo.user_type == 1) {
						res = await getUserList()
					} else {
						res = await getUserProfile()
					}
					this.list = res.data
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.update {
		display: flex;
		justify-content: space-between;
	
		.button {
			// width: 36.32rpx;
			// height: 8.59rpx;
			color: #12A234;
			border: 1px solid #12A234;
			padding: 3.12rpx 5.46rpx;
			display: flex;
			justify-content: space-between;
			cursor: pointer;
	
			image {
				display: inline-block;
				width: 8.59rpx;
				height: 7.81rpx;
				margin-right: 3.12rpx;
			}
	
			text {
				display: inline-block;
				font-size: 6.25rpx;
				font-weight: 500;
			}
	
			&:last-child {
				margin-left: 6.25rpx;
			}
	
			&:hover {
				background-color: #E7F6EB;
			}
		}
	}

	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	/* #endif */

	.green {
		color: #12A234;
		cursor: pointer;
	}

	.text {
		font-size: 7.81rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20%;
	}

	.box {
		display: flex;
		justify-content: space-between;
	}

	.item:first-child {
		margin-left: 23.43rpx;
	}

	.item {
		flex: 1;
	}

	.subItem {
		margin-top: 12.5rpx;
		color: #3B3E66;
	}

	.key {
		font-weight: bold;
	}

	.value {
		opacity: 0.5;
	}
</style>
